<template>
	<view class="content">
		<!-- <uni-list><uni-list-item @tap="go(val.id, val.type)" :title="type[val.type] + ' : ' + val.content" v-for="val of list" :key="val.id"></uni-list-item></uni-list> -->
		<view class="li" v-for="val of list" :key="val.id">
			<view class="hui">{{val.title}}</view>
			<view class="hui">{{val.content}}</view>
			<view class="hui">{{val.create_time}}</view>
			<view class="img_list">
				<view class="img_box">
					<image v-for="url of val.file" :mode="val.file.length==1?'widthFix':'scaleToFill'" :key="url" :class="val.file.length==1?'one':'two'" :src="url" @tap="yulan(val.file,url)"></image>
				</view>
				<view class="zhang">共计{{val.file.length}}张</view>
			</view>
		</view>
		<navigator url="./ExposureStation" class="fixed"></navigator>
		<uni-load-more :status="isMore"></uni-load-more>
	</view>
</template>

<script>
	import CHONG from '../../static/js/function.js';
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import uniList from '@/components/uni-list/uni-list.vue';
	import uniListItem from '@/components/uni-list-item/uni-list-item.vue';
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				list: [],
				isMore: 'more',
				isXiaLa: true,
				isLa: true,
				reqData: {
					pageNumber: 0,
					pageSize: 5
				},
				type: ['曝光', '举报', '流浪犬']
			};
		},
		onLoad() {
			this.getList();
		},
		onReachBottom() {
			if (this.isLa) {
				this.getList();
			}
		},
		onPullDownRefresh() {
			if (this.isXiaLa) {
				this.isXiaLa = false;
				this.isLa = true;
				this.isMore = 'more';
				this.reqData = {
					pageNumber: 0,
					pageSize: 5
				};
				this.list = [];
				this.getList();
			} else {
				uni.stopPullDownRefresh();
			}
		},
		methods: {
			yulan(e,a) {
				uni.previewImage({
					current: a,
					urls: e,
					success: () => {
						console.log("ddd");
					}
				})
			},
			getList() {
				this.isMore = 'loading';
				uni.request({
					url: this.URL + 'exposedList',
					data: this.reqData,
					success: res => {
						console.log('列表');
						console.log(res.data);
						uni.stopPullDownRefresh();
						setTimeout(() => {
							this.isXiaLa = true;
						}, 5000);
						if (res.data.success) {
							this.list = [...this.list, ...res.data.data];
							if (res.data.total <= this.list.length + this.reqData.pageNumber) {
								this.isMore = 'noMore';
								this.isLa = false;
							}
							this.reqData.pageNumber += this.reqData.pageSize;
						} else {
							CHONG.tip('网络错误，请稍后再试');
						}
					}
				});
			},
			go(req, type) {
				uni.navigateTo({
					url: './Details?id=' + req + '&type=' + type
				});
			}
		},
		computed: mapState(['URL']),
		components: {
			uniList,
			uniListItem,
			uniLoadMore
		}
	};
</script>

<style lang="scss">
	.li {
		margin: 40upx 20upx 20upx;
		border-bottom: #888888 solid 2upx;

		.hui {
			color: #888888;
			font-size: 32upx;
			line-height: 1.6em;
		}

		.img_list {
			display: flex;
			flex-wrap: wrap;

			.img_box {
				width: 500upx;
				margin: 20upx;

				.one {
					width: 500upx;
					// height: 500upx;
				}

				.two {
					width: 250upx;
					height: 250upx;
				}

			}

			.zhang {
				font-size: 26upx;
				line-height: 100upx;
			}
		}
	}


	.fixed {
		position: fixed;
		bottom: 50upx;
		right: 50upx;
		width: 80upx;
		height: 80upx;
		z-index: 99;

		border: {
			radius: 50%;
		}

		box-shadow: 4upx 4upx 9upx #333333;
		opacity: 0.8;
		background: $chong-iconbg-color url(../../static/img/navicon04.png);
		background-size: 100% 100%;
	}
</style>
